import React, { useEffect, useState } from 'react'
import { goBack, backgroundObj, addPhotosAlbum, loginData, toast } from '@/utils/utils'
import Taro, { getCurrentInstance, useSaveExitState, useDidShow } from '@tarojs/taro'
import Router from '@/utils/router'
import { View, Text, Image, } from '@tarojs/components';
import { fetchShareInfo, } from '@/server/shop';
import TaroCanvas from '@/components/taro-plugin-canvas'
import './index.scss'
const ShareCode = (props) => {
    const { profile, username } = loginData() || {}
    const [config, setConfig] = useState({
        rssConfig: {},
        shareImage: null,
        canvasStatus: false
    })
    const [shareInfo, setShareInfo] = useState({})
    const { miniProgramQrCodeUrl } = shareInfo
    const { rssConfig, shareImage, canvasStatus } = config
    useDidShow(() => {
        if (!shareImage) {
            shareCode()
        }
    })
    const shareCode = () => {
        fetchShareInfo({
            shareType: 'home',
        }).then(e => {
            const { shareInfo = {}, orgInfo = {} } = e
            const { miniProgramQrCodeUrl } = shareInfo
            const { logo, displayName } = orgInfo
            setConfig({
                canvasStatus: true,
                rssConfig: {
                    width: 750,
                    height: 1334,
                    blocks: [
                        {
                            x: 28,
                            y: 344,
                            text: {
                                text: username,
                                fontSize: 34,
                                color: "#1D2835",
                                lineNum: 1,
                                textAlign: 'center',
                                lineHeight: 52,
                                fontWeight: 'bold'
                            }, // 姓名

                            width: 694,
                            height: 52,
                            zIndex: 18,

                        },
                        {
                            x: 152,
                            y: 72,
                            text: {
                                text: displayName,
                                fontSize: 34,
                                color: "#1D2835",
                                lineNum: 1,
                                lineHeight: 52,
                                fontWeight: 'bold'
                            }, // 姓名

                            width: 694,
                            height: 52,
                            zIndex: 18,

                        },
                        {
                            x: 28,
                            y: 503,
                            text: {
                                text: '发现了一个超方便好用的答疑小程序~',
                                fontSize: 28,
                                color: "#1D2835",
                                lineNum: 1,
                                textAlign: 'center',
                                lineHeight: 42,
                                fontWeight: 'bold'
                            }, // 姓名

                            width: 694,
                            height: 52,
                            zIndex: 18,

                        },
                        {
                            x: 28,
                            y: 1081,
                            text: {
                                text: '学管家答疑小程序',
                                fontSize: 28,
                                color: "#818A96",
                                lineNum: 1,
                                textAlign: 'center',
                                lineHeight: 44,
                                fontWeight: '400'
                            }, // 姓名

                            width: 694,
                            height: 52,
                            zIndex: 18,

                        },

                    ],
                    images: [
                        {
                            url: 'https://wx.gy.cn/answerImage/icon206.png', // 背景
                            width: 750,
                            height: 1334,
                            y: 0,
                            x: 0,
                            zIndex: 5,
                        },
                        {
                            url: logo, // 封面
                            width: 80,
                            height: 80,
                            y: 48,
                            x: 48,
                            zIndex: 10,
                        },
                        {
                            url: profile, // 封面
                            width: 128,
                            height: 128,
                            y: 192,
                            x: 310,
                            borderRadius: 128,
                            borderWidth: 2,
                            borderColor: '#ffffff',
                            zIndex: 10,
                        },
                        {
                            url: miniProgramQrCodeUrl, //二维码
                            width: 480,
                            height: 480,
                            y: 570,
                            x: 140,
                            borderRadius: 24,
                            borderWidth: 1,
                            borderColor: '#F5F7FA',
                            zIndex: 10,
                        },
                    ],
                }
            })
            setShareInfo(shareInfo)
        })
    }

    const onCreateFail = (error) => {
        Taro.hideLoading();
        // 重置 TaroCanvasDrawer 状态
        setConfig({
            canvasStatus: false,
            config: null
        })
        console.log(error);
    }
    const onCreateSuccess = (result) => {
        const { tempFilePath, errMsg } = result;
        Taro.hideLoading();
        if (errMsg === 'canvasToTempFilePath:ok') {
            // addPhotosAlbum(tempFilePath)
            setConfig({
                shareImage: tempFilePath,
                // 重置 TaroCanvasDrawer 状态
                canvasStatus: false,
                config: null
            })
        } else {
            // 重置 TaroCanvasDrawer 状态
            setConfig({
                canvasStatus: false,
                config: null
            })
            Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
            console.log(errMsg);
        }
    }
    const handleAdd = () => {
        const { shareImage } = config
        if (shareImage) {
            addPhotosAlbum(shareImage)
        }
        else {
            shareCode()
            toast('生成图片失败 请重新点击生成')
        }
    }
    const handleShare = () => {
        const { shareImage } = config
        if (shareImage) {
            Taro.showShareImageMenu({
                path: shareImage
            })
        }
        else {
            shareCode()
            toast('生成图片失败 请重新点击生成')
        }
    }
    console.log(config)
    return <View className='ShareCode_box'>
        {/* <Image style={{ width: 375, height: 667 }} src={shareImage}></Image> */}
        <View className='ShareCode_content'>
            <View className='ShareCode_content_bg'>
                <View className='ShareCode_content_margin'>
                    <View style={backgroundObj(profile)} className='ShareCode_content_profile'></View>
                    <View className='ShareCode_content_username font_34 color_style2'>{username}</View>
                    <View className='ShareCode_content_liner'></View>
                    <View className='ShareCode_content_desc color_style2 font_28'>快来学管家答疑和我一起发起疑问吧</View>
                    <View className='ShareCode_content_code'>
                        <View className='ShareCode_code'>
                            <Image style={{ width: '100%', height: '100%' }} src={miniProgramQrCodeUrl}></Image>
                        </View>
                    </View>
                    <View className='ShareCode_content_other font_28'>
                        学管家答疑小程序
                    </View>
                </View>

            </View>
        </View>
        <View className='ShareCode_content_tool'>
            <View className='ShareCode_tool'>
                <View onClick={() => { handleAdd() }} className='ShareCode_tool_left'>
                    <View className='ShareCode_tool_iconleft'></View>
                    <View className='ShareCode_tool_desc font_26'>保存名片</View>
                </View>
                <View onClick={() => { handleShare() }} className='ShareCode_tool_right'>
                    <View className='ShareCode_tool_iconright'></View>
                    <View className='ShareCode_tool_desc font_26'>微信分享</View>
                </View>
            </View>
        </View>
        {canvasStatus && <TaroCanvas
            config={rssConfig}
            onCreateSuccess={onCreateSuccess}
            onCreateFail={onCreateFail}
        />}
    </View>
}
export default ShareCode